<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>国际金融中心</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">

    <script src="/pages/base.js"></script>

</head>

<body>
<div id="frameContent" class="content-wrapper" style="margin-left:0px; height: 500px">
<section class="content-header">
    <h1>
        角色管理
        <small>角色列表</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="all-admin-index.html"><i class="fa fa-dashboard"></i> 首页</a></li>
    </ol>
</section>
<!-- 内容头部 /-->

<!-- 正文区域 -->
<section class="content">

    <!-- .box-body -->
    <div class="box box-primary" id="app">
        <div class="box-header with-border">
            <h3 class="box-title">列表</h3>
        </div>

        <div class="box-body">

            <!-- 数据表格 -->
            <div class="table-box">

                <!--工具栏-->
                <div class="pull-left">
                    <div class="form-group form-inline">
                        <div class="btn-group">
                            <button type="button" class="btn btn-default" title="新建" onclick='location.href="/pages/user/user-add.html"'><i class="fa fa-file-o"></i> 新建</button>
                        </div>
                    </div>
                </div>
                <div class="box-tools pull-right">
                    <div class="has-feedback">
                        <input type="text" class="form-control input-sm" placeholder="搜索">
                        <span class="glyphicon glyphicon-search form-control-feedback"></span>
                    </div>
                </div>
                <!--工具栏/-->

                <!--数据列表-->
                <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
                    <thead>
                    <tr>
                        <th class="" style="padding-right:0px;">

                        </th>
                        <th class="sorting">角色编号</th>
                        <th class="sorting">角色名称</th>
                        <th class="text-center">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="role in pageInfo.list">
                        <td ><input name="ids" type="radio"></td>
                        <td >{{role.roleId}}</td>
                        <td >{{role.roleName}}</td>
                        <td class="text-center">
                            <a :href=`/pages/role/role-update.html?id=${role.roleId}`>编辑</a>
                            <a :href=`/pages/role/role-permission.html?id=${role.roleId}`>权限</a>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <!-- /.box-body -->


        <!-- .box-footer-->

        <div class="box-footer">
            <div class="pull-left">
                <div class="form-group form-inline">

                </div>
            </div>

            <div class="box-tools pull-right">
                <ul class="pagination">
                    <li>
                        <a href="#" @click="roleList(1)" aria-label="Previous">首页</a>
                    </li>
                    <li>
                        <a href="#" @click="roleList(pageInfo.prePage)">上一页</a>
                    </li>
                    <li>
                        <a href="#" @click="roleList(pageInfo.nextPage)">下一页</a>
                    </li>
                    <li>
                        <a href="#" @click="roleList(pageInfo.pages)" aria-label="Next">尾页</a>
                    </li>
                </ul>
            </div>

        </div>


        <!-- /.box-footer-->

    </div>
</section>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            pageInfo:{},
            pageSize: 5
        },
        methods:{
            // 参数：pageNum 表示当前页
            roleList(pageNum){
                let url = '/role/page/'+pageNum + "/"+this.pageSize;
                axios.get(url).then(resp=>{
                    let resultInfo = resp.data;
                    if (resultInfo.success){
                        // resultInfo.data中的data是ResultInfo对象中的data属性
                        this.pageInfo = resultInfo.data;
                    } else {
                        alert(resultInfo.message);
                    }
                })
            }
        },
        created(){
            this.roleList(1);
        }
    });

</script>
</body>
</html>